<template>
  <view class="container" @click="closeClick">
    <page-meta :page-style="showhand ? 'overflow: hidden;' : 'overflow: auto;'"></page-meta>
    <view class="titleBar" :style="{ top: '' + statusBarHeight + 'px' }">
      <image src="/static/images/indexpage/goback-icon.png" class="leftImg" @click.stop="goback()"></image>
      <image src="/static/images/indexpage/delete-icon.png" class="rightImg" v-if="otObj.del_role == 1" @click.stop="deletePost()"></image>
    </view>
    <view class="bgBox">
      <u-swiper :list="otObj.imgList" height="1112" border-radius="0" mode="rect">
      </u-swiper>
    </view>
    <view class="bottom-box" :style="{ 'padding-bottom': '' + safeareabottom + 'px' }">
      <view class="demo-price">
        <view class="pic"> ¥ </view>
        <view class="price"> {{ otObj.price }}</view>
      </view>
      <view class="demo-avatar">
        <view class="pic" @click.stop="toUserDetail(otObj)">
          <image class="point-tag" :src="otObj.author_avatar"></image>
        </view>
        <view class="name" @click.stop="toUserDetail(otObj)">
          {{ otObj.author_name }}</view>
        <view class="status" v-if="otObj.del_role != 1">
          <image class="status-tag" @click.stop="getTrendsFollow()" :src="
              otObj.follow == 1
                ? '/static/images/indexpage/yiguan.png'
                : '/static/images/indexpage/guanzhu.png'
            "></image>
        </view>
        <view class="jubao" v-if="otObj.del_role != 1" @click.stop="showJubao()">
          <image class="jubao-tag" src="/static/images/indexpage/jubao.png"></image>
        </view>
      </view>
      <view class="demo-name">
        <view class="name"> {{ otObj.title }}</view>
      </view>

      <view class="demo-text">
        <view class="text"> {{ otObj.main_content }}</view>
      </view>

      <view class="demo-tag-address">
        <view class="demo-tag">
          <view class="time"> {{ otObj.createtime }}</view>
        </view>
        <view class="demo-tag demo-address">
          <view class="pic">
            <image class="img-tag" src="/static/images/indexpage/topic-icon.png"></image>
          </view>
          <view class="price"> {{ otObj.label }}</view>
        </view>
      </view>
      <view class="demo-degree">
        <text class="text-box">新旧程度</text>
        <text class="text1-box"> {{ otObj.newold }}</text>
      </view>

      <u-gap height="24" bg-color="#E6E6E6"></u-gap>

      <!--评论-->
      <view class="review-box">
        <view class="sum-box">共{{ otObj.comment_num }}条评论</view>

        <view class="line-box" v-for="(item, index) in list" :key="index">
          <view class="content-box">
            <view class="line">
              <view class="pic">
                <image class="point-tag" :src="item.avatar"></image>
              </view>
              <view class="name"> {{ item.nickname }}</view>
              <view class="standing" v-if="item.is_author == 1">楼主</view>
              <view class="time">{{ item.createtime }}</view>
            </view>
            <view class="value">
              {{ item.main_content }}
            </view>
          </view>
        </view>
        <view class="nodata-st" v-if="form.page == form.last_page">
          ------没有更多数据了------</view>
        <view class="nodata-st" v-if="list.length == 0">
          ------暂无数据------</view>
      </view>
    </view>
    <view class="x-footBar">
      <view class="footPublish" v-if="!isShow">
        <view class="myInput">
          <u-input type="textarea" height="52" placeholder="说点什么" auto-height maxlength="500" @click="goWrith()" />
        </view>
        <view class="right-box">
          <view class="img">
            <image class="img-tag" :src="
                otObj.goods == 0
                  ? '/static/images/indexpage/zan.png'
                  : '/static/images/indexpage/tozan.png'
              " @click.stop="getTrendsGoods()"></image>
          </view>
          <view class="value">{{ otObj.good_num }}</view>
          <view class="img">
            <image class="img-tag" src="/static/images/indexpage/kan.png"></image>
          </view>
          <view class="value">{{ otObj.see_num }}</view>
          <view class="img">
            <image class="img-tag" src="/static/images/indexpage/yan.png"></image>
          </view>
          <view class="value">{{ otObj.comment_num }}</view>
        </view>
      </view>

      <view class="footPublish" v-if="isShow">
        <view class="myInput">
          <u-input type="textarea" height="52" placeholder="说点什么" auto-height v-model="main_content" :focus="true" maxlength="500" />
        </view>
        <view class="right" v-throttle="2000" @click.stop="getCommentInsert">
          <u-icon name="chat" size="35"></u-icon>
          <text class="u-padding-left-10">发布</text>
        </view>
      </view>
    </view>
    <x-modal v-model="contractObj.isShow" :showBotton="contractObj.showBotton" :showOneBotton="contractObj.showOneBotton" :title="contractObj.title" @confirm="confirm" @cancel="cancel" :cancelText="contractObj.cancelText" :confirmText="contractObj.confirmText" :canColse="false">
      {{ contractObj.content }}
    </x-modal>
    <popUpWin :popUpWinShow="popUpWinShow" v-if="!popUpWinShow" @showJubao="showJubao" :jubaoObj="jubaoObj"></popUpWin>

    <view v-if="showhand" class="bg-st" @click.stop="sethand()">
      <image src="/static/images/indexpage/xiahua-icon.png" class="shoushi" @click.stop="sethand()"></image>
    </view>
  </view>
</template>

<script>
import api from "@/api/index.js";
import popUpWin from "./popUpWin.vue";
export default {
  components: {
    popUpWin,
  },

  data() {
    return {
      screenHeight:
        uni.getStorageSync("screenHeight") -
        uni.getStorageSync("safeAreaBottom"),
      safeareabottom: uni.getStorageSync("safeAreaBottom") + 48,
      statusBarHeight: uni.getStorageSync("statusBarHeight") + 10,
      otObj: {},
      main_content: "",
      isShow: false,
      popUpWinShow: true,

      formObj: {
        types: "",
        id: "",
      },
      form: {
        page: 1,
        page_size: 10,
        last_page: 0,
      },
      list: [],
      //举报参数
      jubaoObj: {},
      contractObj: {
        title: "提示",
        content: "是否确认删除?", // content: '是否对该用户取消关注?',//content: '是否将该用户移出黑名单?',
        isShow: false,
        showBotton: true,
        cancelText: "否",
        confirmText: "是",
        showOneBotton: false,
      },
      showhand: false,
      isCanRequest: true,
    };
  },
  onLoad(options) {
    this.formObj.types = options.types;
    this.formObj.id = options.id;
    this.init();
    if (
      uni.getStorageSync("isShowHand") == "true" ||
      uni.getStorageSync("isShowHand") == ""
    ) {
      this.showhand = true;
      setTimeout(() => {
        this.showhand = false;
        uni.setStorageSync("isShowHand", "false");
      }, 2000);
    }
  },
  onReachBottom() {
    if (this.form.page < this.form.last_page) {
      this.form.page += 1;
      this.getDev_comment();
    }
  },
  onPullDownRefresh() {
    this.init();
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  methods: {
    setIsRequestFlag() {
      if (this.isCanRequest) {
        this.isCanRequest = false;
        setTimeout(() => {
          this.isCanRequest = true;
        }, 5000);
        return true;
      } else {
        return false;
      }
    },
    init() {
      //获取详情
      this.getpage();
      //获取评论
      this.initcomment();
    },
    initcomment() {
      this.form.page = 1;
      this.form.last_page = 0;
      this.getDev_comment();
    },
    deletePost() {
      let that = this;
      that.contractObj.content = "是否确认删除?";
      that.contractObj.isShow = true;
    },
    cancel(e) {
      this.contractObj.isShow = false;
    },
    //删帖
    confirm() {
      api.base.getTrendsDeletet(this.formObj).then((res) => {
        if (res.code == 1) {
          uni.$u.toast("删除成功");
          this.contractObj.isShow = false;
          uni.$emit("isSeach", {
            isSeachFlag: true,
          });
          setTimeout(() => {
            uni.navigateBack(1);
          }, 1000);
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      });
    },
    getpage() {
      api.base.getTrendsDetail(this.formObj).then((res) => {
        if (res.code == 1) {
          this.otObj = res.data;
          this.otObj.imgList = [];
          for (let i = 0; i < res.data.images.length; i++) {
            this.otObj.imgList.push({
              image: res.data.images[i],
              title: i,
            });
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateBack(1);
          }, 1000);
        }
      });
    },
    getDev_comment() {
      api.base.getDev_comment({ ...this.formObj, ...this.form }).then((res) => {
        if (res.code == 1) {
          this.list =
            this.form.page === 1
              ? res.data.data
              : this.list.concat(res.data.data);
          this.form.last_page = res.data.last_page;
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      });
    },
    //点赞取消
    getTrendsGoods() {
      api.base.getTrendsGoods(this.formObj).then((res) => {
        if (res.code == 1) {
          uni.$u.toast(res.msg);
          if (this.otObj.goods == 0) {
            this.otObj.goods = 1;
            this.otObj.good_num++;
          } else {
            this.otObj.goods = 0;
            this.otObj.good_num--;
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      });
    },
    //关注取消
    getTrendsFollow() {
      api.base
        .getTrendsFollow({ third_uid: this.otObj.author_id })
        .then((res) => {
          if (res.code == 1) {
            uni.$u.toast(res.msg);
            if (this.otObj.follow == 1) {
              this.otObj.follow = 0;
            } else {
              this.otObj.follow = 1;
            }
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
          }
        });
    },
    goWrith() {
      this.isShow = true;
    },
    closeClick() {
      this.isShow = false;
    },
    //评论
    getCommentInsert() {
      let flag = this.setIsRequestFlag();
      if (!flag) {
        console.log("不让请求");
        return;
      } else {
        api.base
          .getCommentInsert({
            ...this.formObj,
            ...{ main_content: this.main_content },
          })
          .then((res) => {
            if (res.code == 1) {
              uni.$u.toast("评论成功");
              this.isShow = false;
              this.main_content = "";
              this.otObj.comment_num++;
              this.initcomment();
            } else {
              uni.showToast({
                title: res.msg,
                icon: "none",
              });
            }
          });
      }
    },
    //弹出举报页面
    showJubao() {
      let that = this;

      that.jubaoObj = {
        ...{
          author_name: that.otObj.author_name,
          label: that.otObj.label,
          main_content: that.otObj.main_content,
        },
        ...that.formObj,
      };
      that.popUpWinShow = !that.popUpWinShow;
    },

    goback() {
      uni.navigateBack(1);
    },
    toUserDetail(item) {
      if (uni.getStorageSync("userinfo").user_id == item.author_id) {
        uni.switchTab({
          url: "/pages/my/my",
        });
      } else {
        uni.navigateTo({
          url: `/pages/otherPeople/index?user_id=` + item.author_id,
        });
      }
    },
    sethand() {
      this.showhand = false;
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  position: relative;
  width: 100%;
  height: 100vh;
  // padding-bottom:120rpx;
  .titleBar {
    width: 100%;
    // height: 88rpx;
    color: #fff;
    font-size: 32rpx;
    line-height: 88rpx;
    font-weight: bold;
    display: flex;
    padding: 0 32rpx;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    // top: 0px;
    right: 0px;
    z-index: 99;

    .leftImg {
      width: 48rpx;
      height: 48rpx;
    }
    .rightImg {
      width: 48rpx;
      height: 48rpx;
    }

    .fenImg {
      width: 48rpx;
      height: 50rpx;
    }
  }
}

.bgBox {
  position: absolute;
  width: 100vw;
  height: 1112rpx;
  overflow: hidden;
  top: 0;
  z-index: 1;
}

.bg-st {
  width: 100%;
}

.bottom-box {
  position: relative;
  top: 1042rpx;
  width: 750rpx;
  // height: 270rpx;
  background: #ffffff;
  border-radius: 32rpx 32rpx 0rpx 0rpx;
  z-index: 2;
  .demo-price {
    font-family: HarmonyOS Sans-Bold, HarmonyOS Sans;
    font-weight: bold;
    color: #ff2544;
    height: 56rpx;
    line-height: 56rpx;
    padding-top: 32rpx;
    margin-bottom: 16rpx;
    display: flex;
    justify-content: center;
    align-content: center;
    .pic {
      float: left;
      font-size: 24rpx;
      line-height: 68rpx;
      .point-tag {
        width: 40rpx;
        height: 40rpx;
        border-radius: 8040rpx 8040rpx 8040rpx 8040rpx;
      }
    }
    .price {
      float: left;
      padding-left: 5rpx;
      font-size: 48rpx;
      color: #ff2544;
    }
  }
  .demo-avatar {
    height: 72rpx;
    line-height: 104rpx;
    padding-top: 32rpx;
    padding-left: 32rpx;
    margin-bottom: 16rpx;
    display: flex;
    position: relative;
    .pic {
      display: flex;
      justify-content: center;
      align-items: center;
      float: left;
      width: 72rpx;
      height: 72rpx;
      .point-tag {
        width: 72rpx;
        height: 72rpx;
        border-radius: 8040rpx 8040rpx 8040rpx 8040rpx;
      }
    }
    .name {
      height: 72rpx;
      line-height: 72rpx;
      padding-left: 16rpx;
      padding-right: 24rpx;
      font-size: 32rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #333333;
    }

    .status {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 72rpx;
      .status-tag {
        width: 120rpx;
        height: 50rpx;
      }
    }
    .jubao {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 72rpx;
      .jubao-tag {
        position: absolute;
        right: 32rpx;
        width: 56rpx;
        height: 56rpx;
      }
    }
  }
  .demo-name {
    // height: 42rpx;
    padding-left: 32rpx;
    font-size: 28rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #333333;
    padding-top: 46rpx;
    // padding-bottom: 26rpx;
  }
  .demo-text {
    margin: 24rpx 32rpx 32rpx 32rpx;
    line-height: 42rpx;
    font-size: 28rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    // font-weight: 500;
    color: #333333;
  }
  .demo-tag-address {
    margin: 0rpx 32rpx 32rpx 32rpx;
    width: calc(100% - 64rpx);
    height: 47rpx;
    display: flex;
    justify-content: space-between;
    .demo-tag {
      // padding-left: 16rpx;
      // padding-right: 16rpx;
      display: flex;
      // width: 168rpx;
      height: 36rpx;
      background: #ffffff;

      border-radius: 29rpx;
      justify-content: center;
      align-items: center;
      .pic {
        width: 24rpx;
        height: 24rpx;
        display: flex;
        justify-content: center;
        align-content: center;
        .img-tag {
          width: 24rpx;
          height: 24rpx;
        }
      }
      .price {
        padding-left: 12rpx;
        font-size: 18rpx;
        color: #999999;

        height: 36rpx;
        line-height: 36rpx;
      }
      .time {
        color: #999999;
        font-size: 22rpx;
        height: 36rpx;
        line-height: 36rpx;
      }
    }
    .demo-address {
      padding-left: 16rpx;
      padding-right: 16rpx;
      background: rgba(109, 12, 247, 0.1);
      .price {
        color: #6d0cf7;
      }
      .pic {
        height: 24rpx;
        line-height: 24rpx;
        width: 24rpx;
        height: 24rpx;
        // border-radius: 100rpx;
        // background: #6d0cf7;
        font-size: 24rpx;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-content: center;
        .img-tag {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }
  }
  .demo-degree {
    margin: 32rpx;
    padding: 16rpx;
    background: #f5f5f5;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    // border: 1rpx solid red;

    .text-box {
      width: 90rpx;
      display: inline-block;
      background: rgba(109, 12, 247, 0.1);
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      opacity: 1;
      font-size: 18rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #6d0cf7;
      padding: 4rpx 8rpx 4rpx 8rpx;
    }
    .text1-box {
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #666666;
    }
  }
  .review-box {
    .sum-box {
      height: 42rpx;
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #999999;
      line-height: 42rpx;
      margin-left: 32rpx;
      margin-top: 24rpx;
    }
    .line-box {
      border-bottom: 2rpx solid #f2f2f2;
      margin: 24rpx 32rpx 24rpx 32rpx;
      .content-box {
        margin-bottom: 32rpx;
        .line {
          height: 64rpx;
          line-height: 64rpx;
          display: flex;
          align-items: center;
          position: relative;
          .pic {
            width: 64rpx;
            height: 64rpx;
            border-radius: 38rpx 38rpx 38rpx 38rpx;
            .point-tag {
              width: 64rpx;
              height: 64rpx;
              border-radius: 8040rpx 8040rpx 8040rpx 8040rpx;
            }
          }
          .name {
            padding-left: 16rpx;
            font-size: 28rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: bold;
            color: #333333;
          }
          .standing {
            margin-left: 16rpx;
            width: 53rpx;
            height: 35rpx;
            background: rgba(109, 12, 247, 0.1);
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            font-size: 18rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #6d0cf7;
            line-height: 35rpx;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .time {
            position: absolute;
            font-size: 22rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #999999;
            right: 0rpx;
            top: 0rpx;
          }
        }
        .value {
          margin: 16rpx 0rpx 24rpx 80rpx;
          font-size: 28rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #666666;
          line-height: 42rpx;
        }
      }
      .content-box2 {
        margin-left: 80rpx;
        .value {
          margin: 16rpx 0rpx 24rpx 0rpx;
        }
      }
    }
  }
}
.footPublish {
  display: flex;
  align-items: center;
  height: 104rpx;
  .myInput {
    display: inline-block;
    background: #f7f7f7;
    border-radius: 40rpx;
    opacity: 1;
    border: 1rpx solid rgba(0, 0, 0, 0.12);
    flex: 1;
    padding: 4rpx 18rpx;

    ::v-deep.u-input__textarea {
      min-height: 0 !important;
    }
  }

  .right {
    display: inline-block;
    background: #333333;
    margin-left: 24rpx;
    border-radius: 60rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #ffffff;
    line-height: 42rpx;
    padding: 10rpx 26rpx;
  }
  .right-box {
    display: flex;
    height: 42rpx;
    line-height: 42rpx;
    padding-left: 6rpx;
    .img {
      width: 40rpx;
      padding-left: 16rpx;
      margin-right: 10rpx;
      .img-tag {
        width: 40rpx;
        height: 40rpx;
      }
    }
    .value {
      padding-left: 10rpx;

      font-size: 28rpx;
      font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
      font-weight: 400;
      color: #333333;
      // padding-right: 30rpx;
    }
  }
}
.x-footBar {
  // height: 104rpx !important;
  padding: 0rpx 26rpx 26rpx 32rpx !important;
  // box-sizing: border-box;
}
.bg-st {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9999;
  display: flex;
  justify-content: center;
  .shoushi {
    width: 88rpx;
    height: 88rpx;
    position: absolute;
    bottom: 200rpx;
  }
}
</style>